<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
    <% include include/link %>
    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid widget-stage">
    <h1 class="widget-stage-title">Douyou8UI 项目通用组件库</h1>
    <p class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现。</p>
    <section class="widget-item">
        <div class="widget-item-title"></div>
        <div class="widget-item-cnt">
            <button type="button" class="btn btn-primary" id="alert-1">swal&nbsp;弹&nbsp;窗</button>
            <button type="button" class="btn btn-primary" id="alert-2">弹&nbsp;窗</button>
        </div>
    </section>
</div>
<% include include/footer %>
<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert-dev.min.js"></script>
<script src="https://cdn.bootcss.com/artDialog/7.0.0/dialog-plus.js"></script>
<script>
$('#alert-1').on('click', function(){
    swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "删除",
        closeOnConfirm: false
    }, function () {
        swal("删除成功！", "您已经永久删除了这条信息。", "success");
    });
});

$('#alert-2').on('click', function(){
    dialog({
        title:'欢迎使用',
        content:'欢迎使用 artDialog 对话框组件'
    }).showModal();
});
</script>
</body>
</html>